import { useState, useEffect } from "react"
import { Table, Tag, Space,Button } from 'antd';
import { useDispatch, useSelector } from "react-redux"
import { asyncInitList, asyncDelListById } from "../reducers/userReducer"





export default function List() {

    const [columns, setfirst] = useState([

        {
            title: '编号',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username'
        },
        {
            title: '密码',
            dataIndex: 'userpwd',
            key: 'username'
        },
        {
            title: '操作',
            key: 'action',
            render: (text: any, record: any) => (
                <Space size="middle">
                    <Button onClick={()=>{
                        dispatch(asyncDelListById(record.id))
                    }}>删除</Button>
                </Space>
            ),
        }])

    let data = useSelector((state: any) => state.userInfo.list);
    let dispatch = useDispatch();

    useEffect(() => {

        if (!data.length) {
            dispatch(asyncInitList());
        }
    }, []);




    return (
        <Table columns={columns} dataSource={data} />
    )
}



// ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);